<template>
	<view>
		<form @submit="formSubmit">
			<input type="text" class="uni-input" placeholder="输入您要绑定的邮箱" name="email" v-model="email" />
			<input type="text" password class="uni-input" placeholder="请输入密码" name="pwd" v-model="password" />
			<button type="primary" :loading="loading" formType="submit" :class="{ 'button-disable': disable }">完成</button>
		</form>
	</view>
</template>

<script>
	var graceChecker = require('../../graceUI/jsTools/graceChecker.js');
	export default {
		data() {
			return {
				loading: false,
				email:"",
				password: ""
			};
		},
		computed: {
			disable() {
				return !this.email || !this.password;
			}
		},
		methods: {
			formSubmit(e) {
				if (this.loading) {
					return;
				}
				//定义表单规则
				var rule = [
					{ name: 'email', checkType: 'email', checkRule: '', errorMsg: '邮箱格式不符' },
					{ name: 'pwd', checkType: 'string', checkRule: '6,', errorMsg: '密码至少6个字符' }
				];
				//进行表单检查 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
					}, 2000);
				} else {
					uni.showToast({ title: graceChecker.error, icon: 'none' });
				}
			}
		}
	}
</script>

<style lang="stylus">
button
	width 90%
	margin 30rpx auto
	color #333333 !important
	background #FFE934 !important
.button-disable
	background #F4F4F4 !important
	color #999999 !important
.uni-input
	border-bottom 1rpx solid #EEEEEE
	height 60rpx
	padding 15rpx 25rpx
	line-height 60rpx
	font-size 32rpx
	background #FFFFFF
</style>
